<template>
	<div>
		<div class="return-bar">
			<i class="iconfont" @click="back()"></i>
			新手专享 注册即领568元红包
		</div>

		<div class="reg_from detail_top">
			<com-alert
			:show.sync="alertData.show"
			:title.sync="alertData.title"
			:buttontxt.sync="alertData.buttontxt"
			:content.sync="alertData.content"
			></com-alert>
			<div class="upper">
				<div class="content">
					<div style="margin-bottom:0.5rem;">
						<img src="../../assets/images/reg/new-reg-highlight.png" />
					</div>
					<!-- <ul class="clearfix">
						<li>
							<img src="../../assets/images/reg/new-reg-icon1.png" />
							<strong>银行资金存管</strong>
							<span>平台不触碰用户资金充值提现实时到账</span>
						</li>

						<li>
							<img src="../../assets/images/reg/new-reg-icon2.png" />
							<strong>实物抵押+第三方公司担保</strong>
							<span>专注房产车辆抵押优质借款项目借款人到期未还钱担保公司代偿</span>
						</li>

						<li>
							<img src="../../assets/images/reg/new-reg-icon3.png" />
							<strong>信息透明真实可查</strong>
							<span>用户在上班时间不用预约可随时来公司核查借款项目文件</span>
						</li>

						<li>
							<img src="../../assets/images/reg/new-reg-icon4.png" />
							<strong>收益稳 门槛低</strong>
							<span>年化收益高达13.2%，100元起投</span>
						</li>

					</ul> -->

						<div v-if=" getted  ">
							<validator name="validation1" >
								<div class="login-from">
									<div class="login-control">
										<div class="control">
											<input v-model="username" placeholder="请输入手机号" v-validate:username="{required:true, maxLength: 10}" maxLength="11" />
										</div>


										<div class="control">
											<input v-model="verify" placeholder="请输入图形验证码" v-validate:code="{required:true, maxLength: 4}" maxLength="4" />
											<img class="verify" v-show="show_img"  src="{{img_src}}"  @click="reloadImg" />
										</div>

										<div class="control">
											<input v-model="code" placeholder="请输入短信验证码" v-validate:code="{required:true, maxLength: 4}" maxLength="4" />
											<button class="send-code" v-bind:class="timecls"  @click="sendVCode()"> {{timemsg}} </button>
										</div>


										<div class="control">
											<input v-show=" !showPWD " v-model="password" type="password" placeholder="设置密码" v-validate:password="{required:true}" />
											<input v-show=" showPWD " v-model="password" type="text" placeholder="设置密码" v-validate:password="{required:true}" />
											<i class="iconfont icon-eyesclose" @click="switchKw()" > {{{ iconString } }} </i>
										</div>

										<div class="control" v-show=" referenced ">
											<input type="text" placeholder="推荐人（选填）" v-model="reference"  id="reference"  />
										</div>

										<div  style="padding: 0rem;margin-bottom: 0rem;">
											<label>
												<input type="checkbox"  v-model="terms_input"   style="width:  auto;vertical-align: middle;"/>
												有喜财富注册协议
											</label>

											<span style="margin-left:10px" @click="showTerms">查看</span>
										</div>

										<div>
											<button class="p_btn postIt" type="button"  @click="regSumbit()" >完成</button>
										</div>
									</div>

								</div>
							</validator>
						</div>

						<div v-else>

								<div class="row">
									<div class="flex" style="width:65%;">
										<input v-model="username" placeholder="请输入手机号"   />
									</div>
									<div class="flex" style="width:35%;">
										<button class="p_btn" style="width: 100%" @click=" setGet  ">立即领取</button>
									</div>
								</div>

						</div>

				</div>
			</div>
			<div class="lower">
				<img src="../../assets/images/reg/new-reg-note.png" v-link="{ path: '/invest/index?productype=current' }" />
			</div>
		</div>


		<common-dialog v-show="showDialog" @update:setparent=" setparent " :close="true" >
			<terms></terms>
		</common-dialog>

	</div>



</template>

<script>
import '../../assets/sass/user/login.scss'

import CommonDialog from "../../components/dialog";  //弹窗插件
import Terms from "./terms";
import { mapGetters } from 'vuex'

import {c_reg_verify_img, c_base64, Api_Reg,Api_Reg_Code} from '../../config/api'
import {Loading} from 'vux'
import ComAlert from '../../components/common/alert'
import api from '../../data/api'
var time_ment = null;

export default {

	data () {
		return {

			user_terms:['', '', ''],

			alertData:{
				show:false,
				title:'标题',
				buttontxt:'确定',
				content:'sign'
			},

			terms_input:true,
			referenced:true,
			getted:false,
			recommend_uid: '',
			username: localStorage.getItem("tel") || '',
			code: '',
			img_src:'',
			show_img:true,
			verify:'',
			password: '',
			repassword: '',
			rec_name: '',
			busy: false,
			iconString:'&#xe712;',
			showPWD:false,
			reference:'',
			timecls:'',
			timemsg:'获取验证码',
			timer: 10,       //默认倒数30秒
			stopCount : false,   //默认是停止的，但界面加载之后会变成false
			Interval:null  //setInterval的对象
		}
	},

    computed: {
      ...mapGetters([
		  'showDialog'
      ])
	},

	components:{
		CommonDialog,
		Terms,
		ComAlert,
		Loading
	},
	methods: {
		setparent(params){
			//this.showDialog = params.status;
			this.$store.dispatch('setShowDialog', params.status)
		},

		reloadImg(){
			/*this.$http({url: c_img_verify, method: 'GET'}).then(function (response) {
			this.img_src = c_img_verify;
			});*/
			clearInterval(time_ment);
			this.show_img = false;
			this.img_src = '';
			var that = this;

			var timestamp = Date.parse(new Date());
			timestamp = timestamp / 1000;
			var rkey = that.global.r_key()
			var pkey = that.global.p_key()

			//this.img_src = c_img_verify
			time_ment = setInterval(function(){
			that.show_img = true;
			that.img_src = c_reg_verify_img+'&t='+timestamp+'&r_key='+rkey+'&p_key='+pkey
			},300);

		},

		back(){
			window.history.back();
		},

		updateSms () {
			if(this.timer <= 0)
			{
				//this.timer = 10;
				this.timecls='';
				this.stopCount = false;
				this.timemsg = "重新发送";
			}
			else{
				this.timecls='gray';
				this.timer--;
				this.timemsg = '剩余'+this.timer+'秒';
			}

		},


		startTimer () {
			//console.log('start');
			//如果是false就开始倒计时，如果是true就停止倒计时
			//clearInterval(this.Interval);
			clearInterval(this.global.g_counting);
			this.timer = 60;
			if(this.stopCount == false)
			{
				//this.Interval = setInterval(this.update,1000);
				this.global.g_counting = setInterval(this.updateSms,1000);
			}
			else
			{
				//clearInterval(this.Interval);
				clearInterval(this.global.g_counting);
			}

			this.stopCount = !this.stopCount;
		},

		switchKw(){
			if(this.iconString == '&#xe712;')
			this.iconString = '&#xe648;'
			else
			this.iconString = '&#xe712;'
			this.showPWD = !this.showPWD;
		},

		setGet(){
			if (this.username=='' || this.busy) {
				return false;
			}
			this.getted = true;
			var that = this;

			if(this.reference !=''){
				setTimeout(function(){
					that.referenced = false;
					document.getElementById('reference').setAttribute('readonly', 'readonly');
				}, 10);
			}


			that.showTerms();


		},

		regSumbit: function () {
			//console.log(this.reference)

			if(this.terms_input == false){
				this.alertData = {show:true, title:'信息提示', buttontxt:'确定', content:'请钩选并同意有喜财富注册协议,谢谢合作!'};
				return false;
			}

			if (this.$validation1.invalid || this.busy) {
				return false;
			}


			/*if(this.password != this.repassword){
			alert('两次密码输入不一致！')
			return false;
			}*/
			this.busy = true, this.$store.dispatch('setShowLoading', true);
			var data = {'verify':this.verify, 'phone': this.username,'code':this.code,'password':this.password,'rec_name':this.reference}
			this.$http.post(Api_Reg, data,'').then(function (response) {
				var rs = response.data;
				alert(rs.msg)
				this.busy = false, this.$store.dispatch('setShowLoading', false);
				if(rs.status){
				localStorage.setItem("tel", this.username);
				sessionStorage.setItem("login", true);
				//sessionStorage.setItem("loan", false)
				this.$router.go('/openAccount')
				}else{
				this.reloadImg();
				this.verify='';
				}
			});
		},

		showTerms(){
			//var res = await api.news.detail({"id":"2297"});
			//console.log(res);

			//console.log(this.user_terms[0]);
			//this.showDialog = true;
			this.$store.dispatch('setShowDialog',  true)
			//.this.alertData = {show:true, title:'有喜财富注册协议', buttontxt:'确定', content: this.user_terms[0] };
		},

		sendVCode: function () {

			//console.log(this.stop)

			if(this.verify=='' || this.stop || this.busy) {
			return false;
			}
			if(!this.username){
			alert('请输入您的手机号！')
			return false;
			}

			this.$store.dispatch('setShowLoading', true);

			this.busy = true;
			var data = {'verify':this.verify, 'phone': this.username}
			this.$http.post(Api_Reg_Code, data,'').then(function (response) {
				this.$store.dispatch('setShowLoading', false);
				var rs = response.data;
				this.busy = false;
				if(rs.status){
				this.startTimer();
				}else{
				alert(rs.msg);
				this.timemsg = "获取验证码", this.timecls='', this.stopCount = false;

				this.reloadImg();
				this.verify='';
				}
			});



		},


		jm(){
			this.$http({url: c_base64+'&code='+this.recommend_uid, method: 'GET'}).then(function (response) {
			this.reference = response.data.username  || '';
			//document.getElementById('reference').setAttribute('readonly', 'readonly')
			});
		},



		async is_login(){

			/* this.$http({url: c_is_logined, method: 'GET'}).then(function (rs) {
				if(rs.data.status){
					this.$route.router.go('/')
				}
			}); */
			var res = await api.user.is_Logined();
			if(res.status){
				this.$route.router.go('/')
			}
		}

	},
	route: {
		activate ( transition ) {
			var timestamp = Date.parse(new Date());
			timestamp = timestamp / 1000;

			var rkey = this.global.r_key()
			var pkey = this.global.p_key()

			this.img_src = c_reg_verify_img+'&t='+timestamp+'&r_key='+rkey+'&p_key='+pkey;


			this.from = transition.to.query.from
			this.recommend_uid = transition.to.query.recommend_uid || ''
			if(this.recommend_uid!==""){
				this.jm();
			}
			//console.log(this.from)
			/* if(sessionStorage.getItem("login")){
			this.$route.router.go('/')
			}else{
			transition.next();
			} */

			transition.next();
			this.is_login();
			//this.getTerms();

		}
	}
}
</script>


<style lang="scss" >
.reg_from{
	.weui_dialog_bd{
		max-height: 300px;
		overflow-y: scroll;
		text-align: left;
		p{
			margin-bottom:10px;
		}
	}
	.weui_dialog{
		background-color: #fff!important;
	}
}
</style>
